import React from 'react';
import Highlighter from 'react-highlight-words';
import {Button, Card, Drawer, Input, Space, Table} from 'antd';
import Divider from "antd/es/divider";
import Tooltip from "antd/es/tooltip";
import EyeOutlined from "@ant-design/icons/lib/icons/EyeOutlined";
import EditOutlined from "@ant-design/icons/lib/icons/EditOutlined";
import DeleteOutlined from "@ant-design/icons/lib/icons/DeleteOutlined";
import icon_liu from "../../../picture/刘安平.png";
import icon_lian from "../../../picture/蒋廉.png";
import './index.css'
import {SearchOutlined} from "@ant-design/icons";
import Image from "antd/es/image";

export default function ManageSystem() {

    const [title1,setTitle1] = React.useState('四级报名信息管理')
    const [visible, setvisible] = React.useState(false);
    const [name, setName] = React.useState('');
    const [age, setAge] = React.useState('');
    const [sex, setSex] = React.useState('');
    const [id, setId] = React.useState('');
    const [school, setSchool] = React.useState('');
    const [visibleChange, setvisibleChange] = React.useState(false);
    const [searchText, setSearchText] = React.useState("");
    const [searchedColumn, setSearchedColumn] = React.useState("");
    const [searchInput, setSearchInput] = React.useState("");
    const [pagination,setPagination] = React.useState({
        pageSize: 5,
    });
    const [itemData,setItemData] = React.useState([]);
    const [dataSource,setDataSoure] = React.useState([{
        key: '1',
        name: '刘安平',
        sex:'女',
        age: 21,
        PersonId: '1234567891',
        school:'西南科技大学',
        status: '未修改',
        icon:icon_liu,
    },
        {
            key: '2',
            name: '蒋廉',
            age: '22',
            sex:'男',
            PersonId: '1234567890',
            school:'西南科技大学',
            status:'未修改',
            icon:icon_lian,
        },
        {
            key: '3',
            name: '王一',
            age: '22',
            sex:'男',
            PersonId: '1234567890',
            school:'西南科技大学',
            status:'未修改',
            icon:icon_lian,
        },
        {
            key: '4',
            name: '王二',
            sex:'男',
            age: 21,
            PersonId: '1234567891',
            school:'西南科技大学',
            status: '未修改',
            icon:icon_liu,
        },
        {
            key: '5',
            name: '王三',
            age: '22',
            sex:'男',
            PersonId: '1234567890',
            school:'西南科技大学',
            status:'未修改',
            icon:icon_lian,
        },
        {
            key: '6',
            name: '王四',
            sex:'男',
            age: 21,
            PersonId: '1234567891',
            school:'西南科技大学',
            status: '未修改',
            icon:icon_liu,
        },
        {
            key: '王五',
            name: '蒋廉',
            age: '22',
            sex:'男',
            PersonId: '1234567890',
            school:'西南科技大学',
            status:'未修改',
            icon:icon_lian,
        },
        {
            key: '刘一',
            name: '刘安平',
            sex:'男',
            age: 21,
            PersonId: '1234567891',
            school:'西南科技大学',
            status: '未修改',
            icon:icon_liu,
        },
        {
            key: '刘二',
            name: '蒋廉',
            age: '22',
            sex:'男',
            PersonId: '1234567890',
            school:'西南科技大学',
            status:'未修改',
            icon:icon_lian,
        },
        {
            key: '刘三',
            name: '刘安平',
            sex:'男',
            age: 21,
            PersonId: '1234567891',
            school:'西南科技大学',
            status: '未修改',
            icon:icon_liu,
        }]);

    let getColumnSearchProps;
    getColumnSearchProps = dataIndex => ({
        filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
            <div style={{ padding: 8 }}>
                <Input
                    ref={node => {
                        setSearchInput(node);
                    }}
                    placeholder={`Search ${dataIndex}`}
                    value={selectedKeys[0]}
                    onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                    onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
                    style={{ marginBottom: 8, display: 'block' }}
                />
                <Space>
                    <Button
                        type="primary"
                        onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
                        icon={<SearchOutlined />}
                        size="small"
                        style={{ width: 90 }}
                    >
                        Search
                    </Button>
                    <Button onClick={() => handleReset(clearFilters)} size="small" style={{ width: 90 }}>
                        Reset
                    </Button>
                    <Button
                        type="link"
                        size="small"
                        onClick={() => {
                            confirm({ closeDropdown: false });
                            setSearchedColumn(dataIndex);
                            setSearchText(selectedKeys[0]);
                        }}
                    >
                        Filter
                    </Button>
                </Space>
            </div>
        ),
        filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
        onFilter: (value, record) =>
            record[dataIndex]
                ? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase())
                : '',
        onFilterDropdownVisibleChange: visible => {
            if (visible && searchInput) {
                console.log(searchInput);
                setTimeout(() => searchInput.select(), 100);
            }
        },
        render: text =>
            searchedColumn === dataIndex ? (
                <Highlighter
                    highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
                    searchWords={[searchText]}
                    autoEscape
                    textToHighlight={text ? text.toString() : ''}
                />
            ) : (
                text
            ),
    });

    function handleSearch(selectedKeys, confirm, dataIndex) {
        confirm();
        setSearchedColumn(dataIndex);
        setSearchText(selectedKeys[0]);
    };

    function handleReset(clearFilters) {
        clearFilters();
        setSearchText('');
    };

    const columns = [
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
            align: 'center',
            className:'size',
            ...getColumnSearchProps('name'),
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
            className:'size',
            align: 'center',
            ...getColumnSearchProps('age'),
        },
        {
            title: '性别',
            dataIndex: 'sex',
            key: 'sex',
            align: 'center',
            className:'size',
            ...getColumnSearchProps('sex'),
        },
        {
            title: '准考证号',
            dataIndex: 'PersonId',
            key: 'PersonId',
            align: 'center',
            className:'size',
            ...getColumnSearchProps('PersonId'),
        },
        {
            title: '学校',
            dataIndex: 'school',
            key: 'school',
            align: 'center',
            className:'size',
            ...getColumnSearchProps('school'),
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            align: 'center',
            className:'size',
            ...getColumnSearchProps('status'),
        },
        {
            title: '考生管理',
            align: 'center',
            key: 'action',
            dataIndex: 'action',
            width: '15%',
            className:'size',
            render: (key,data) => (
                <div>
                    <Tooltip title='详情'>
                        <a
                            onClick={() => handleInfo(data)}
                        >
                            <EyeOutlined />
                        </a>
                    </Tooltip>
                    <Divider type='vertical' />
                    <Tooltip title='编辑'>
                        <a
                            onClick={() => handleEdit(data)}
                        >
                            <EditOutlined />
                        </a>
                    </Tooltip>
                    {/*<Divider type='vertical' />*/}
                    {/*<Tooltip title='添加'>*/}
                    {/*    <a*/}
                    {/*        // onClick={() => this.handleAddPlayerToMatch(record)}*/}
                    {/*        // disabled={record.status !== 'signing up'}*/}
                    {/*    >*/}
                    {/*        <PlusOutlined />*/}
                    {/*    </a>*/}
                    {/*</Tooltip>*/}
                    <Divider type='vertical' />
                    <Tooltip title='删除'>
                        <a
                            onClick={() => delMatch(data)}
                            // disabled={record.status !== 'not start'}
                        >
                            <DeleteOutlined />
                        </a>
                    </Tooltip>
                </div>
            )
        }

    ];

    function handleInfo(data) {
        console.log((data))
        setItemData(data);
        setvisible(true);
        // dataSource[0].age;
        // dataSource[0].name;
        // dataSource[0].school;
        // console.log()
    }

    function onClose() {

        setvisible(false);
    }

    function handleEdit(data){
        console.log(data)
        setItemData(data);
        setvisibleChange(true);
    }

    
    function onCloseChange() {
        setvisibleChange(false);
    }
    
    function inputChange(e) {
        console.log(e.target.value);
        setName(e.target.value);
    }

    function inputChangeAge(e){
        setAge(e.target.value);
    }

    function inputChangeSex(e){
        setSex(e.target.value);
    }

    function inputChangeId(e){
        setId(e.target.value);
    }

    function inputChangeSchool(e){
        setSchool(e.target.value);
    }

    function handleButton() {

        if(title1==='四级报名信息管理'){
            setTitle1('六级报名信息管理')
            setDataSoure([{
                key: '1',
                name: '王维',
                age: '20',
                sex:'男',
                PersonId: '1234567890',
                school:'清华大学',
                status:'未修改',
                icon:icon_lian,
            },
                {
                    key: '2',
                    name: '李一',
                    sex:'男',
                    age: 21,
                    PersonId: '1234567891',
                    school:'北京大学',
                    status: '未修改',
                    icon:icon_liu,
                },{
                    key: '3',
                    name: '张一',
                    age: '20',
                    sex:'男',
                    PersonId: '1234567890',
                    school:'清华大学',
                    status:'未修改',
                    icon:icon_lian,
                },
                {
                    key: '4',
                    name: '张二',
                    sex:'男',
                    age: 21,
                    PersonId: '1234567891',
                    school:'北京大学',
                    status: '未修改',
                    icon:icon_liu,
                },{
                    key: '张三',
                    name: '王维',
                    age: '20',
                    sex:'男',
                    PersonId: '1234567890',
                    school:'清华大学',
                    status:'未修改',
                    icon:icon_lian,
                },
                {
                    key: '6',
                    name: '张四',
                    sex:'男',
                    age: 21,
                    PersonId: '1234567891',
                    school:'北京大学',
                    status: '未修改',
                    icon:icon_liu,
                }])
        }else {
            setTitle1('四级报名信息管理')
            setDataSoure([{
                key: '1',
                name: '刘安平',
                sex:'女',
                age: 21,
                PersonId: '1234567891',
                school:'西南科技大学',
                status: '未修改',
                icon:icon_liu,
            },
                {
                    key: '2',
                    name: '蒋廉',
                    age: '22',
                    sex:'男',
                    PersonId: '1234567890',
                    school:'西南科技大学',
                    status:'未修改',
                    icon:icon_lian,
                },
                {
                    key: '3',
                    name: '王一',
                    age: '22',
                    sex:'男',
                    PersonId: '1234567890',
                    school:'西南科技大学',
                    status:'未修改',
                    icon:icon_lian,
                },
                {
                    key: '4',
                    name: '王二',
                    sex:'男',
                    age: 21,
                    PersonId: '1234567891',
                    school:'西南科技大学',
                    status: '未修改',
                    icon:icon_liu,
                },
                {
                    key: '5',
                    name: '王三',
                    age: '22',
                    sex:'男',
                    PersonId: '1234567890',
                    school:'西南科技大学',
                    status:'未修改',
                    icon:icon_lian,
                },
                {
                    key: '6',
                    name: '王四',
                    sex:'男',
                    age: 21,
                    PersonId: '1234567891',
                    school:'西南科技大学',
                    status: '未修改',
                    icon:icon_liu,
                },
                {
                    key: '7',
                    name: '王五',
                    age: '22',
                    sex:'男',
                    PersonId: '1234567890',
                    school:'西南科技大学',
                    status:'未修改',
                    icon:icon_lian,
                },
                {
                    key: '8',
                    name: '刘一',
                    sex:'男',
                    age: 21,
                    PersonId: '1234567891',
                    school:'西南科技大学',
                    status: '未修改',
                    icon:icon_liu,
                },
                {
                    key: '9',
                    name: '刘二',
                    age: '22',
                    sex:'男',
                    PersonId: '1234567890',
                    school:'西南科技大学',
                    icon:icon_lian,
                    status:'未修改'
                },
                {
                    key: '10',
                    name: '刘三',
                    sex:'男',
                    age: 21,
                    PersonId: '1234567891',
                    school:'西南科技大学',
                    status: '未修改',
                    icon:icon_liu,
                }])
        }

    }
    
    function getInputValue() {
        console.log(itemData)
        // itemData.name=name;
        // itemData.age=age;
        // itemData.sex=sex;
        // itemData.school=school;
        // itemData.PersonId=id;
        for(let i=0;i<dataSource.length;i++){
            if(dataSource[i].key===itemData.key){
                if(name!==''){
                    dataSource[i].name=name;
                    dataSource[i].status="已修改";
                }else {
                    dataSource[i].name=itemData.name;
                };
                if(age!=='') {
                    dataSource[i].age=age;
                    dataSource[i].status="已修改";
                    // console.log(age)
                }else{
                    dataSource[i].age=itemData.age;
                };
                if(sex!=='') {
                    // console.log(sex)
                    dataSource[i].sex=sex;
                    dataSource[i].status="已修改";
                }else{
                    dataSource[i].sex=itemData.sex;
                };
                if(school!=='') {
                    dataSource[i].school=school;
                    dataSource[i].status="已修改";
                }else {
                    dataSource[i].school=itemData.school;
                }
                if(id!=='') {
                    dataSource[i].PersonId=id;
                    dataSource[i].status="已修改";
                }else {
                    dataSource[i].PersonId=itemData.PersonId;
                }
            }
        }
        console.log(dataSource);

        setvisibleChange(false)
        console.log(itemData);
    }

    function delMatch(data){
        dataSource.forEach((element,index) => {
            console.log(element,"element")
            if (element.key === data.key) {
                dataSource.splice(index,1)
            }
        })
        console.log(dataSource)

        // console.log(data);
        // for(let i=0;i<dataSource.length;i++){
        //     if(dataSource[i].key===data.key){
        //         let newData = dataSource[i];
        //         // dataSource[i].name=null;
        //         // dataSource[i].age=null;
        //         // dataSource[i].sex='';
        //         // dataSource[i].school='';
        //         // dataSource[i].PersonId='';
        //         // if(name!=null){
        //         //     dataSource[i].name='';
        //         //     dataSource[i].status="已修改";
        //         // }
        //         // if(age!=null) {
        //         //     dataSource[i].age='';
        //         //     dataSource[i].status="已修改";
        //         // }
        //         // if(sex!=null) {
        //         //     dataSource[i].sex='';
        //         //     dataSource[i].status="已修改";
        //         // }
        //         // if(school!=null) {
        //         //     dataSource[i].school='';
        //         //     dataSource[i].status="已修改";
        //         // }
        //         // if(id!=null) {
        //         //     dataSource[i].PersonId='';
        //         //     dataSource[i].status="已修改";
        //         // }
        //     }
        // }
    }


    return (
        <div>
            <Card className="manageStyle" title="四六级报名信息管理平台" headStyle={{ fontSize: 30 }}>
                <Card className="cetManegeCard" title={title1} headStyle={{ fontSize: 20 }}>
                    <Table dataSource={dataSource} columns={columns} pagination={pagination}/>
                    <Button className="styleB" onClick={() => handleButton()}>切换</Button>
                </Card>
                {/*<Card*/}
                {/*    style={{ marginTop: 16 }}*/}
                {/*    title="六级报名信息管理"*/}
                {/*    headStyle={{ fontSize: 20 }}*/}
                {/*>*/}
                {/*    <Table dataSource={dataSource} columns={columns} pagination={pagination}/>*/}
                {/*</Card>*/}
            </Card>
            <Drawer
                title="考生信息详情"
                placement="right"
                closable={false}
                onClose={onClose}
                visible={visible}
                width={1000}
                style={{ position: 'absolute' }}
            >
                <div className="divIcon">
                    <Image src={itemData.icon} alt= "" style={{maxWidth:800, height:400}}/>
                </div>
                <table className="drawerTable" border="1">
                    <tr className="allTr">
                        <td className="tdTitle">姓名</td>
                        <td>{itemData.name}</td>
                        <td className="tdTitle">年龄</td>
                        <td>{itemData.age}</td>
                    </tr>
                    <tr className="allTr">
                        <td className="tdTitle">性别</td>
                        <td>{itemData.sex}</td>
                        <td className="tdTitle">准考证号</td>
                        <td>{itemData.PersonId}</td>
                    </tr>
                    <tr className="allTr">
                        <td className="tdTitle">报考考点</td>
                        <td>{itemData.school}</td>
                        <td className="tdTitle">信息状态</td>
                        <td>{itemData.status}</td>
                    </tr>

                </table >

            </Drawer>

            <Drawer
                title="考生信息修改"
                placement="right"
                closable={false}
                onClose={onCloseChange}
                visible={visibleChange}
                width={1000}
                style={{ position: 'absolute' }}
            >
                <div className="topDiv" >
                    <div className="divChanged">
                        <div className="divChange1">姓名：</div>
                        <div className="divChange2"><Input style={{width:300}} size="large"
                                                           placeholder={itemData.name} onChange={(e)=>inputChange(e)}/></div>
                    </div>

                    <div className="divChanged">
                        <div className="divChange1">年龄：</div>
                        <div className="divChange2"><Input style={{width:300}} size="large"
                                                           placeholder={itemData.age} onChange={(e)=>inputChangeAge(e)}/></div>
                    </div>
                </div>
                <div className="divChanged">
                    <div className="divChange1">性别：</div>
                    <div className="divChange2"><Input style={{width:300}} size="large"
                                                       placeholder={itemData.sex} onChange={(e)=>inputChangeSex(e)}/></div>
                </div>

                <div className="divChanged">
                    <div className="divChange1">准考证号：</div>
                    <div className="divChange2"><Input style={{width:300}} size="large"
                                                       placeholder={itemData.PersonId} onChange={(e)=>inputChangeId(e)}/></div>
                </div>

                <div className="divChanged">
                    <div className="divChange1">学校：</div>
                    <div className="divChange2"><Input style={{width:300}} size="large"
                                                       placeholder={itemData.school} onChange={(e)=>inputChangeSchool(e)}/></div>
                </div>

                <div>
                    <div className="isSureDiv">
                        <Button type="primary" className="buttonOk" onClick={()=>getInputValue()}>确定</Button>
                    </div>
                    <div className="isDiv">
                        <Button className="buttonOk1" onClick={() => onCloseChange()}>取消</Button>
                    </div>
                </div>
            </Drawer>




        </div>
    )

}
export { ManageSystem }